<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link th:href="@{/adminlte/css/bootstrap.css}" rel="stylesheet" type="text/css" media="all" />
<!-- menu -->
<link th:href="@{/adminlte/css/component.css}" rel="stylesheet" type="text/css"  />
<!-- //menu -->
<link th:href="@{/adminlte/css/style.css}" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" th:src="@{/adminlte/js/jquery-2.1.4.min.js}"></script>
<!-- //js -->
<!-- fonts -->
<link th:href="@{http://fonts.googleapis.com/css?family=Gabriela}" rel='stylesheet' type='text/css'>
<link th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800}" rel='stylesheet' type='text/css'>
<!-- //fonts -->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript"th:src="@{/adminlte/js/move-top.js}"></script>
		<script type="text/javascript"th:src="@{/adminlte/js/easing.js}"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->
	<!--animate-->
<link th:href="@{/adminlte/css/animate.css}" rel="stylesheet" type="text/css" media="all">
<script th:src="@{/adminlte/js/wow.min.js}"></script>
	<script>
		 new WOW().init();
	</script>
<!--//end-animate-->

</head>
<body class="cbp-spmenu-push">
	 <!--top-header-->
		<!--bottom-->

	 <section th:replace="~{/fragment/SectionButton :: SectionButton}"/>
	 <nav th:replace="~{fragment/nav :: nav}"/>
		  
		<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
		<script th:src="@{/adminlte/js/classie.js}"></script>
		<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				showRightPush = document.getElementById( 'showRightPush' ),
				body = document.body;

			showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};

			function disableOther( button ) {
				if( button !== 'showLeftPush' ) {
					classie.toggle( showLeftPush, 'disabled' );
				}
				if( button !== 'showRightPush' ) {
					classie.toggle( showRightPush, 'disabled' );
				}
			}
		</script>
<!-- banner -->
<div class="banner">
	<div class="banner-left">
		<div class="grid__item wow fadeInDown animated" data-wow-delay=".5s">
			<h1><a class="link link--ilin"th:href="@{index.html}"><span>Royal  </span><span> Shine</span></a></h1>
		</div>
		<div class="clearfix"></div>
		<div class="banner-info wow fadeInUp animated" data-wow-delay=".5s">
			<h3 th:text="欢迎来到酒店预订页面">Step your feet in a perfect place</h3>
	</div>

		<div class="banner-right wow fadeInRight animated" data-wow-delay=".5s">
			<div class="banner-text">
				<h3>选择你的酒店</h3>
				<form th:action="@{/SearchHotel}">
					<div class="best-hot">
						<h5>目的地</h5>
						<input id="Destination" name="Destination" type="text" value="Type Here" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Type Here';}" >
					</div>
					<div class="best-hot">
						<h5>关键字</h5>
						<input  id="KeyWord" name="KeyWord" type="text" value="Type Here" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Type Here';}" >
					</div>
					<div class="best-hot">
						<h5>入住时间</h5>
						<div class="book_date">							
							<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
							<input type="date" name="CheckIntime" value="Select date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Select date';}">
						</div>
					</div>
					<div class="best-hot">
						<h5>退房时间</h5>
						<div class="book_date">							
							<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
							<input type="date"  name="CheckOuttime" value="Select date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Select date';}">
						</div>
					</div>
					<input type="submit" id="SearchHotel" value="查询酒店">
				</form>
			</div>
		</div>
	</div>
</div>
	 <div th:replace="~{/fragment/footer :: footer}"/>
</div>
<!-- for bootstrap working -->
	<script th:src="@{/adminlte/js/bootstrap.js}"></script>
<!-- //for bootstrap working -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a th:href="@{#}" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->

</body>
</html>